تحجيم مسارات شبكة CSS: إتقان التحكم الداخلي والخارجي

يُعد تخطيط شبكة CSS أداة قوية لإنشاء تخطيطات ويب معقدة ومتجاوبة. تكمن إحدى نقاط قوتها الرئيسية في قدراتها المرنة على تحجيم المسارات، مما يتيح لك التحكم في حجم الصفوف والأعمدة بدقة. يعد فهم الكلمات المفتاحية والدوال المختلفة لتحجيم المسارات أمرًا بالغ الأهمية لبناء تخطيطات قابلة للتكيف والصيانة. تتعمق هذه المقالة في المفاهيم المتقدمة للتحجيم الداخلي والخارجي في شبكة CSS، وتستكشف كيف تمكّنك من إنشاء تخطيطات تتكيف برشاقة مع مختلف المحتويات وأحجام الشاشات.

فهم مسارات الشبكة والتحجيم

قبل الخوض في تفاصيل التحجيم الداخلي والخارجي، دعنا نلخص المفاهيم الأساسية لمسارات شبكة CSS.

ما هي مسارات الشبكة؟

مسارات الشبكة هي الصفوف والأعمدة في تخطيط الشبكة. إنها تحدد الهيكل الذي توضع عليه عناصر الشبكة. يؤثر حجم هذه المسارات بشكل مباشر على التخطيط العام وكيفية توزيع المحتوى داخل الشبكة.

تحديد أحجام المسارات

يمكنك تحديد أحجام المسارات باستخدام خاصيتي grid-template-rows و grid-template-columns. تقبل هاتان الخاصيتان قائمة من القيم مفصولة بمسافات، حيث تمثل كل قيمة حجم المسار المقابل. على سبيل المثال:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
}
            

              
                Copy
              
            
          

ينشئ هذا الكود شبكة من ثلاثة أعمدة وصفين. يأخذ العمودان الأول والثالث كل منهما جزءًا واحدًا (fr) من المساحة المتاحة، بينما يأخذ العمود الثاني جزأين. يتم تحديد حجم الصفوف تلقائيًا بناءً على محتواها.

التحجيم الداخلي مقابل التحجيم الخارجي

يكمن جوهر تحجيم مسارات الشبكة المتقدم في فهم التمييز بين التحجيم الداخلي والخارجي. تحدد هذه المفاهيم كيفية تحديد حجم المسار بناءً على محتواه والمساحة المتاحة.

التحجيم الداخلي: معتمد على المحتوى

التحجيم الداخلي يعني أن حجم مسار الشبكة يتم تحديده بواسطة المحتوى الموجود داخل عناصر الشبكة الموضوعة في ذلك المسار. سيتوسع المسار أو يتقلص لاستيعاب المحتوى، حتى حدود معينة. تشمل الكلمات المفتاحية للتحجيم الداخلي:

• auto: القيمة الافتراضية. يتم تحديد حجم المسار من خلال أكبر مساهمة في الحد الأدنى لحجم عناصر الشبكة في المسار. في معظم الحالات، يعني هذا بشكل فعال أن المسار سيكون كبيرًا بما يكفي لاحتواء كل المحتوى دون فيضان، ولكن يمكن أن يتأثر بقيم min-width/min-height المحددة على عناصر الشبكة.
• min-content: يتم تحجيم المسار ليلائم أصغر مساحة يحتاجها المحتوى دون فيضان. على سبيل المثال، سيتم التفاف النص عند أصغر نقطة ممكنة، حتى لو كان ذلك يكسر الكلمات بشكل غير ملائم.
• max-content: يتم تحجيم المسار ليلائم أكبر مساحة يحتاجها المحتوى دون فيضان. بالنسبة للنص، يعني هذا أنه سيحاول تجنب الالتفاف قدر الإمكان، مما قد يؤدي إلى مسارات واسعة أو طويلة جدًا.
• fit-content(length): يتم تحجيم المسار إلى القيمة الأصغر بين max-content و length المحدد. يتيح لك هذا تعيين حجم أقصى للمسار مع السماح له بالتقلص بناءً على محتواه.

مثال: التحجيم الداخلي باستخدام min-content و max-content

لنفترض سيناريو به عمودان. يتم تحجيم العمود الأول باستخدام min-content، والثاني باستخدام max-content. إذا كان المحتوى في العمود الأول كلمة طويلة، فسيتم كسرها عند أي نقطة ممكنة لتناسب الحد الأدنى لحجم المحتوى. أما العمود الثاني، فسيتوسع لاستيعاب المحتوى دون التفاف.

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}
            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>
            

              
                Copy
              
            
          

في هذا المثال، سيتم تقسيم كلمة "Supercalifragilisticexpialidocious" إلى أسطر متعددة في العمود الأول، بينما سيبقى "Short text" على سطر واحد في العمود الثاني. يوضح هذا كيف يتكيف التحجيم الداخلي مع متطلبات الحجم الكامنة للمحتوى.

مثال: التحجيم الداخلي باستخدام fit-content()

تكون دالة `fit-content()` مفيدة عندما تريد أن يكون حجم المسار معتمدًا على المحتوى، ولكن مع وجود حد أقصى للحجم أيضًا. يمكن استخدام هذا لمنع الأعمدة أو الصفوف من أن تصبح كبيرة جدًا، مع السماح لها بالتقلص إذا كان المحتوى أصغر.

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}
            

              
                Copy
              
            
          

في هذا المثال، سيتوسع العمود الأول ليلائم محتواه، لكنه لن يتجاوز عرض 200 بكسل. سيشغل العمود الثاني المساحة المتبقية. هذا مفيد لإنشاء تخطيطات تريد فيها أن يكون العمود مرنًا، ولكن لا يشغل مساحة كبيرة جدًا.

التحجيم الخارجي: معتمد على المساحة

من ناحية أخرى، يعني التحجيم الخارجي أن حجم مسار الشبكة يتم تحديده بواسطة عوامل خارج المحتوى، مثل المساحة المتاحة في حاوية الشبكة أو قيمة حجم ثابتة. تشمل الكلمات المفتاحية للتحجيم الخارجي:

• length: قيمة طول ثابتة (مثل 100px، 2em، 50vh). سيكون المسار بهذا الحجم تمامًا، بغض النظر عن المحتوى.
• percentage: نسبة مئوية من حجم حاوية الشبكة (مثل 50%). سيشغل المسار هذه النسبة المئوية من المساحة المتاحة.
• fr (وحدة كسرية): تمثل جزءًا من المساحة المتاحة في حاوية الشبكة بعد تحجيم جميع المسارات الأخرى. هذه هي الطريقة الأكثر مرونة لتوزيع المساحة بين المسارات.

مثال: التحجيم الخارجي باستخدام وحدات fr

تُعد وحدة fr لا تقدر بثمن لإنشاء تخطيطات متجاوبة تتكيف مع أحجام الشاشات المختلفة. من خلال تعيين وحدات كسرية للمسارات، فإنك تضمن أنها تشترك في المساحة المتاحة بشكل نسبي.

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}
            

              
                Copy
              
            
          

في هذا المثال، تحتوي حاوية الشبكة على عمودين. يأخذ العمود الأول جزءًا واحدًا من المساحة المتاحة، بينما يأخذ العمود الثاني جزأين. إذا كان عرض حاوية الشبكة 600 بكسل، فسيكون عرض العمود الأول 200 بكسل، وعرض العمود الثاني 400 بكسل (مطروحًا منه أي فجوة في الشبكة). هذا يضمن أن الأعمدة تحافظ دائمًا على علاقتها النسبية، بغض النظر عن حجم الشاشة.

مثال: التحجيم الخارجي بالنسب المئوية والأطوال الثابتة

            .grid-container {
  display: grid;
  grid-template-columns: 200px 50% 1fr;
  grid-gap: 10px;
}
            

              
                Copy
              
            
          

في هذا المثال، يتم تعيين العمود الأول على عرض ثابت يبلغ `200px`. سيشغل العمود الثاني 50٪ من عرض حاوية الشبكة. أخيرًا، يستخدم العمود الثالث وحدة `1fr`، لذلك سيشغل أي مساحة متبقية بعد تحجيم العمودين الأولين.

الجمع بين التحجيم الداخلي والخارجي: دالة minmax()

تتيح لك دالة minmax() الجمع بين التحجيم الداخلي والخارجي، مما يوفر تحكمًا أكبر في أحجام المسارات. إنها تحدد نطاقًا من الأحجام المقبولة للمسار، مع تحديد كل من القيمة الدنيا والقصوى.

            minmax(min, max)
            

              
                Copy
              
            
          

• min: الحد الأدنى لحجم المسار. يمكن أن تكون هذه أي قيمة صالحة لتحجيم المسار، بما في ذلك الكلمات المفتاحية الداخلية (auto، min-content، max-content) أو القيم الخارجية (length، percentage، fr).
• max: الحد الأقصى لحجم المسار. يمكن أن تكون هذه أيضًا أي قيمة صالحة لتحجيم المسار. إذا كانت القيمة `max` أصغر من `min`، فسيتم تجاهل `max`، ويتم استخدام `min`.

مثال: استخدام minmax() للأعمدة المتجاوبة

حالة استخدام شائعة لدالة minmax() هي إنشاء أعمدة متجاوبة لها عرض أدنى ولكن يمكن أن تتوسع لملء المساحة المتاحة.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}
            

              
                Copy
              
            
          

هنا، ينشئ repeat(auto-fit, minmax(200px, 1fr)) أكبر عدد ممكن من الأعمدة التي يبلغ عرضها 200 بكسل على الأقل ولكن يمكن أن تتوسع لملء المساحة المتبقية. تضمن الكلمة المفتاحية auto-fit انهيار الأعمدة الفارغة، مما يخلق تخطيطًا مرنًا ومتجاوبًا.

مثال: الجمع بين minmax() والتحجيم الداخلي

            .grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
  grid-gap: 10px;
}
            

              
                Copy
              
            
          

في هذا المثال، سيكون عرض العمود الأول على الأقل بعرض الحد الأدنى لمحتواه، ولكنه لن يتجاوز `300px`. سيشغل العمود الثاني المساحة المتبقية.

التطبيقات العملية وأفضل الممارسات

يعد فهم التحجيم الداخلي والخارجي أمرًا بالغ الأهمية لإنشاء تخطيطات قوية وقابلة للتكيف. إليك بعض التطبيقات العملية وأفضل الممارسات التي يجب أخذها في الاعتبار:

• التنقل المتجاوب: استخدم minmax() لإنشاء عناصر تنقل لها عرض أدنى ولكن يمكن أن تتوسع لملء المساحة المتاحة في شريط التنقل.
• تخطيطات البطاقات المرنة: استخدم repeat(auto-fit, minmax()) لإنشاء تخطيطات بطاقات تتكيف تلقائيًا مع أحجام الشاشات المختلفة، مما يضمن التفاف البطاقات برشاقة على الشاشات الأصغر.
• الأشرطة الجانبية المدركة للمحتوى: استخدم min-content أو max-content لتحديد حجم الأشرطة الجانبية بناءً على محتواها، مما يسمح لها بالتوسع أو التقلص حسب الحاجة.
• تجنب العروض الثابتة: قلل من استخدام العروض الثابتة (px) لصالح الوحدات النسبية (%، fr، em) لإنشاء تخطيطات تتكيف مع أحجام الشاشات المختلفة وتفضيلات المستخدم.
• الاختبار الشامل: اختبر دائمًا تخطيطات الشبكة الخاصة بك على أجهزة وأحجام شاشات مختلفة لضمان عرضها بشكل صحيح وتوفير تجربة مستخدم متسقة.

تقنيات تحجيم الشبكة المتقدمة

بالإضافة إلى الكلمات المفتاحية والدوال الأساسية، تقدم شبكة CSS تقنيات أكثر تقدمًا لضبط أحجام المسارات بدقة.

دالة repeat()

تبسط دالة repeat() إنشاء مسارات متعددة بنفس الحجم. تأخذ وسيطتين: عدد التكرارات وحجم المسار.

            repeat(number, track-size)
            

              
                Copy
              
            
          

على سبيل المثال:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

هذا يكافئ:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

يمكن أيضًا استخدام دالة repeat() مع الكلمتين المفتاحيتين auto-fit و auto-fill لإنشاء تخطيطات شبكة متجاوبة تتكيف تلقائيًا مع المساحة المتاحة.

الكلمتان المفتاحيتان auto-fit و auto-fill

تُستخدم هاتان الكلمتان المفتاحيتان مع دالة repeat() لإنشاء شبكات متجاوبة تتكيف مع عدد العناصر في الشبكة والمساحة المتاحة. يكمن الفرق الرئيسي بينهما في كيفية تعاملهما مع المسارات الفارغة.

• auto-fit: إذا كانت جميع المسارات فارغة، فستنهار المسارات إلى عرض 0.
• auto-fill: إذا كانت جميع المسارات فارغة، فستحتفظ المسارات بحجمها.

مثال: استخدام auto-fit للأعمدة المتجاوبة

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}
            

              
                Copy
              
            
          

في هذا المثال، ستنشئ الشبكة أكبر عدد ممكن من الأعمدة التي يبلغ عرضها 200 بكسل على الأقل ولكن يمكن أن تتوسع لملء المساحة المتبقية. إذا لم يكن هناك عدد كافٍ من العناصر لملء جميع الأعمدة، فستنهار الأعمدة الفارغة إلى عرض 0.

اعتبارات التدويل (i18n) والتعريب (l10n)

عند تصميم تخطيطات لجمهور عالمي، من المهم مراعاة تأثير اللغات المختلفة واتجاهات الكتابة. يمكن أن يختلف طول النص بشكل كبير بين اللغات، مما قد يؤثر على التخطيط إذا لم يتم تكوين أحجام المسارات بشكل صحيح. إليك بعض النصائح لتصميم تخطيطات مدولة:

• استخدام الوحدات النسبية: فضل الوحدات النسبية مثل em و rem والنسب المئوية على الوحدات الثابتة مثل البكسل للسماح للنص بالتوسع وفقًا لتفضيلات حجم خط المستخدم.
• التحجيم الداخلي: استخدم الكلمات المفتاحية للتحجيم الداخلي مثل min-content و max-content و fit-content() لضمان تكيف المسارات مع حجم المحتوى، بغض النظر عن اللغة.
• الخصائص المنطقية: استخدم الخصائص المنطقية مثل inline-start و inline-end بدلاً من الخصائص المادية مثل left و right لدعم اللغات من اليسار إلى اليمين (LTR) ومن اليمين إلى اليسار (RTL).
• الاختبار: اختبر تخطيطاتك بلغات واتجاهات كتابة مختلفة لتحديد ومعالجة أي مشكلات محتملة. قم بمحاكاة السلاسل النصية الأطول، التي قد توجد في لغات مختلفة.

الخاتمة

يعد تحجيم مسارات شبكة CSS أداة قوية ومتعددة الاستخدامات لإنشاء تخطيطات ويب متجاوبة وقابلة للتكيف. من خلال إتقان مفاهيم التحجيم الداخلي والخارجي، وفهم دالة minmax()، والاستفادة من دالة repeat()، يمكنك بناء تخطيطات تتكيف برشاقة مع مختلف المحتويات وأحجام الشاشات. تذكر أن تأخذ في الاعتبار تأثير التدويل والتعريب عند التصميم لجمهور عالمي.

جرب تقنيات تحجيم المسارات المختلفة واستكشف الإمكانيات اللانهائية لشبكة CSS. مع الممارسة والفهم القوي لهذه المفاهيم، ستكون مجهزًا جيدًا لإنشاء تخطيطات ويب متطورة وسهلة الاستخدام لأي مشروع.